<template>
    <div>
        <div class="flex warp content-center justify-between">
            <h2 class="text-sm font-medium text-gray-500">数据库连接</h2>
            <button type="button"
                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                @click="addNewConnection">
                <PlusIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" />
                新加连接
            </button>
        </div>
        <ul role="list" class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
            <li v-for="project in loadLinkInfos()" :key="project.name" class=" col-span-1 flex rounded-md shadow-sm">
                <div style="overflow: visible;"
                    class="flex flex-1 items-center justify-between truncate rounded-md border border-gray-200 bg-white">
                    <div class="flex-1 truncate px-4 py-2 text-sm">
                        <a @click="goLink(project)"
                            class="font-medium text-gray-900 hover:text-gray-600 hover:cursor-pointer">{{ project.name
                            }}</a>
                        <p class="text-gray-500">{{ project.members }}</p>
                    </div>
                    <div class="flex-shrink-0 pr-2">
                        <Menu as="div" class="relative ml-auto">
                            <MenuButton class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
                                <span class="sr-only">Open options</span>
                                <EllipsisVerticalIcon class="h-5 w-5" aria-hidden="true" />
                            </MenuButton>
                            <transition enter-active-class="transition ease-out duration-100"
                                enter-from-class="transform opacity-0 scale-95"
                                enter-to-class="transform opacity-100 scale-100"
                                leave-active-class="transition ease-in duration-75"
                                leave-from-class="transform opacity-100 scale-100"
                                leave-to-class="transform opacity-0 scale-95">
                                <MenuItems
                                    class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
                                    <MenuItem v-slot="{ active }">
                                    <a href="#" @click="editLink(project)"
                                        :class="[active ? 'bg-gray-50' : '', 'block px-3 py-1 text-sm leading-6 text-gray-900']">编辑<span
                                            class="sr-only"></span></a>
                                    </MenuItem>
                                    <MenuItem v-slot="{ active }">
                                    <a href="#" @click="deleteLink(project)"
                                        :class="[active ? 'bg-gray-50' : '', 'block px-3 py-1 text-sm leading-6 text-gray-900']">删除<span
                                            class="sr-only"></span></a>
                                    </MenuItem>
                                </MenuItems>
                            </transition>
                        </Menu>
                    </div>
                </div>
            </li>
        </ul>
        <NotificationComponent class="z-50" :type="ntRes.type" :title="ntRes.title" :message="ntRes.message"
            v-model:show="ntShow" />
        <NewConnectComponent v-model:show="newConnectShow" :notification="notificationShow" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { EllipsisVerticalIcon, PlusIcon } from '@heroicons/vue/20/solid'
import { NewConnectComponent } from '@/components/config'
import { NotificationComponent } from '@/components/notification'
import useLinkStore from '@/stores/link'
import router from '@/router';
import useLayoutStore from '@/stores/layout';
import { getRedisUrl } from '@/utils/redis'

const newConnectShow = ref(false);
const ntShow = ref(false);
const linkStore = useLinkStore();
const layoutStore = useLayoutStore();

const ntRes = ref({
    type: 'success',
    title: '',
    message: ''
})

type Project = {
    name: string,
    initials: string,
    members: string,
    bgColor: string
}
// { name: '自己服务器', initials: 'Online', members: '192.168.0.168:6379', bgColor: 'bg-pink-600' },

/**
 * 添加新链接点击
 */
const addNewConnection = () => {
    newConnectShow.value = true;
}
/**
 * 提示消息
 * @param type 
 * @param title 
 * @param message 
 */
const notificationShow = (type: string, title: string, message: string) => {
    ntShow.value = false;
    ntShow.value = true;
    ntRes.value.type = type;
    ntRes.value.title = title;
    ntRes.value.message = message;
}
/**
 * 获取链接
 */
const loadLinkInfos = () => {
    let projects = [] as Project[]
    linkStore.links.map((link) => {
        projects.push({
            name: link.linkName,
            initials: 'Online',
            members: '' + link.host + ':' + link.port,
            bgColor: 'bg-pink-600'
        })
    })
    return projects;
}
/**
 * 编辑链接
 * @param project 
 */
const editLink = (project: Project) => {

}
/**
 * 删除链接
 * @param project 
 */
const deleteLink = (project: Project) => {
    const index = linkStore.links.findIndex(item => item.linkName == project.name);
    if (-1 != index) {
        linkStore.links.splice(index, 1);
    }
}
/**
 * 去链接
 * @param project 
 */
const goLink = (project: Project) => {
    layoutStore.layout = layoutStore.layout.map((nav) => {
        if (nav.current && nav.path !== '/link') {
            nav.current = false
        }
        if (nav.path === '/link') {
            nav.current = true
        }
        return nav
    });
    const link = linkStore.links.filter(item => item.linkName == project.name)[0];
    router.replace({
        path: '/link',
        query: {
            url: getRedisUrl(link) || ''
        }
    })
}
</script>